<template>
  <view class="edit-info-container">
    <!-- 表单内容 -->
    <scroll-view class="form-scroll" scroll-y>
      <view class="form-content">
        <!-- 头像上传 -->
        <view class="form-item avatar-item">
          <text class="form-label">头像</text>
          <view class="avatar-upload" @click="chooseAvatar">
            <image 
              class="avatar-image" 
              :src="formData.avatar" 
              mode="aspectFill"
            ></image>
            <uni-icons 
              class="upload-icon" 
              type="camera" 
              size="24" 
              color="#999"
            ></uni-icons>
          </view>
        </view>
        
        <!-- 昵称 -->
        <view class="form-item">
          <text class="form-label">昵称</text>
          <input 
            class="form-input" 
            v-model="formData.nickname" 
            placeholder="请输入昵称"
            placeholder-class="placeholder"
          />
        </view>
        
        <!-- 性别 -->
        <view class="form-item">
          <text class="form-label">性别</text>
          <picker 
            class="form-picker" 
            mode="selector" 
            :range="genderOptions" 
            range-key="label"
            :value="genderIndex" 
            @change="onGenderChange"
          >
            <view class="picker-content">
              <text>{{ formData.gender ? genderOptions[genderIndex].label : '请选择性别' }}</text>
              <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
            </view>
          </picker>
        </view>
        
        <!-- 生日 -->
        <view class="form-item">
          <text class="form-label">生日</text>
          <picker 
            class="form-picker" 
            mode="date" 
            fields="day" 
            :value="formData.birthday" 
            :start="minDate"
            :end="maxDate" 
            @change="onBirthdayChange"
          >
            <view class="picker-content">
              <text>{{ formData.birthday || '请选择生日' }}</text>
              <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
            </view>
          </picker>
        </view>
        
        <!-- 个人简介 -->
        <view class="form-item">
          <text class="form-label">个人简介</text>
          <textarea 
            class="form-textarea" 
            v-model="formData.bio" 
            placeholder="介绍一下自己吧~"
            placeholder-class="placeholder"
            maxlength="100"
          ></textarea>
          <view class="textarea-counter">
            <text>{{ formData.bio ? formData.bio.length : 0 }}/100</text>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 底部保存按钮 -->
    <view class="action-bar">
      <button 
        class="save-btn" 
        :class="{disabled: !formChanged}" 
        :disabled="!formChanged"
        @click="saveInfo"
      >保存修改</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 性别选项
const genderOptions = ref([
  { label: '男', value: 1 },
  { label: '女', value: 2 },
  { label: '保密', value: 0 }
])

// 日期范围
const minDate = ref('1900-01-01')
const maxDate = ref(new Date().toISOString().split('T')[0])

// 表单数据
const originalData = ref({})
const formData = ref({
  avatar: '/static/images/default-avatar.png',
  nickname: '',
  gender: 0,
  birthday: '',
  bio: ''
})

// 计算属性
const genderIndex = computed(() => {
  return genderOptions.value.findIndex(item => item.value === formData.value.gender)
})

const formChanged = computed(() => {
  return JSON.stringify(formData.value) !== JSON.stringify(originalData.value)
})

// 页面加载
onLoad(() => {
  // 模拟获取用户信息
  fetchUserInfo()
})

// 获取用户信息
const fetchUserInfo = () => {
  // 模拟API请求
  setTimeout(() => {
    const mockData = {
      avatar: '/static/images/user-avatar.jpg',
      nickname: '小明同学',
      gender: 1,
      birthday: '1990-05-15',
      bio: '热爱生活，喜欢分享'
    }
    formData.value = { ...mockData }
    originalData.value = { ...mockData }
  }, 500)
}

// 选择头像
const chooseAvatar = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePaths = res.tempFilePaths
      // 这里应该上传图片到服务器，然后获取服务器返回的URL
      // 模拟上传成功
      formData.value.avatar = tempFilePaths[0]
    }
  })
}

// 性别选择
const onGenderChange = (e) => {
  const index = e.detail.value
  formData.value.gender = genderOptions.value[index].value
}

// 生日选择
const onBirthdayChange = (e) => {
  formData.value.birthday = e.detail.value
}

// 保存信息
const saveInfo = () => {
  if (!formChanged.value) return
  
  uni.showLoading({
    title: '保存中...'
  })
  
  // 模拟API请求
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '保存成功',
      icon: 'success'
    })
    originalData.value = { ...formData.value }
  }, 1000)
}

// 返回上一页
const goBack = () => {
  if (formChanged.value) {
    uni.showModal({
      title: '提示',
      content: '您有未保存的修改，确定要离开吗？',
      success: (res) => {
        if (res.confirm) {
          uni.navigateBack()
        }
      }
    })
  } else {
    uni.navigateBack()
  }
}
</script>

<style lang="scss" scoped>
.edit-info-container {
  height: calc(100vh - 100rpx);
  display: flex;
  flex-direction: column;
  background-color: $light-bg;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  background-color: $white-bg;
  border-bottom: 1rpx solid #f5f5f5;
  
  .nav-title {
    font-size: $font-size-32rpx;
    font-weight: bold;
    color: $text-color;
  }
  
  .nav-right {
    width: 24px;
  }
}

.form-scroll {
  flex: 1;
  height: calc(100vh - 180rpx);
}

.form-content {
  padding: 0 30rpx;
}

.form-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  background-color: $white-bg;
  
  .form-label {
    font-size: $font-size-30rpx;
    color: $text-color;
    margin-bottom: 20rpx;
    display: block;
  }
  
  .form-input {
    font-size: $font-size-28rpx;
    color: $text-color;
    height: 60rpx;
  }
  
  .form-picker {
    font-size: $font-size-28rpx;
    color: $text-color;
    height: 60rpx;
    
    .picker-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  
  .form-textarea {
    width: 100%;
    height: 180rpx;
    font-size: $font-size-28rpx;
    color: $text-color;
    background-color: $light-bg;
    padding: 20rpx;
    border-radius: 8rpx;
    box-sizing: border-box;
  }
  
  .textarea-counter {
    text-align: right;
    font-size: $font-size-24rpx;
    color: $text-color-666;
    margin-top: 10rpx;
  }
}

.avatar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  .avatar-upload {
    position: relative;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    overflow: hidden;
    
    .avatar-image {
      width: 100%;
      height: 100%;
    }
    
    .upload-icon {
      position: absolute;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.8);
      padding: 6rpx;
      border-radius: 50%;
    }
  }
}

.action-bar {
  padding: 20rpx 30rpx;
  background-color: $white-bg;
  border-top: 1rpx solid #f5f5f5;
  
  .save-btn {
    background-color: $primary-color;
    color: $text-color-inverse;
    font-size: $font-size-30rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    
    &.disabled {
      opacity: 0.6;
      background-color: #ccc;
    }
  }
}

.placeholder {
  color: #ccc;
  font-size: $font-size-28rpx;
}
</style>